<template>
  <div>
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      placeholder
      fixed
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="ellipsis" size="20" color="#000" />
      </template>
    </van-nav-bar>

    <!-- 切换动画 -->
    <van-tabs
      sticky
      offset-top="45px"
      animated
      v-model="orderStatus"
      @change="change"
    >
      <van-tab
        v-for="(item, idx) in ordertop"
        :key="idx"
        :title="item.title"
        :name="item.name"
        swipeable="true"
      >
      </van-tab>
    </van-tabs>

    <!-- 详情数据 -->
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      @offset="300"
    >
      <div class="orderlist" v-for="item in orderlist" :key="item.orderId">
        <div class="oredr" @click="goodsdetails(item.orderNo)">
          <div class="p">
            <van-row>
              <van-col span="16">订单时间：{{ item.createTime }}</van-col>
              <van-col span="8">{{ item.orderStatusString }}</van-col>
            </van-row>
            <van-card
              v-for="it in item.newBeeMallOrderItemVOS"
              :key="it.goodsId"
              :num="it.goodsCount"
              :price="it.sellingPrice"
              :title="it.goodsName"
              :thumb="it.goodsCoverImg"
              desc="全场包邮"
            />
          </div>
        </div>
      </div>
    </van-list>
    <!-- </van-pull-refresh> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      ordertop: [
        {
          title: "全部",
          name: "",
        },
        {
          title: "待付款",
          name: "0",
        },
        {
          title: "待确认",
          name: "1",
        },
        {
          title: "待发货",
          name: "2",
        },
        {
          title: "已发货",
          name: "3",
        },
        {
          title: "交易完成",
          name: "4",
        },
      ],
      page: 1,
      orderlist: [],
      orderStatus: "",
      // loading
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
    };
  },
  created() {
    this.refresh();
  },
  mounted() {
    this.$parent.showTabbar = false;
  },
  destroyed() {
    this.$parent.showTabbar = true;
  },
  methods: {
    onLoad() {
      // console.log("触底了");
      this.refresh();
    },
    change(name) {
      // console.log("切换了");
      // 请求关闭
      this.finished = false;
      this.loading = false;

      // 初始化数据
      this.page = 1;
      this.orderStatus = name;
      // console.log(this.orderStatus);
      this.orderlist = [];

      this.refresh();
    },
    refresh() {
      this.$axios
        .get("/order", {
          params: {
            pageNumber: this.page++,
            status: this.orderStatus,
          },
        })
        .then(({ data }) => {
          this.loading = false;
          // console.log(data);
          // data:为服务器传回的数据
          let goodArr = [...data.list];
          this.orderlist.push(...goodArr);
          // console.log(this.orderlist);
          if (data.totalCount <= this.orderlist.length) {
            this.finished = true;
          }
        });
    },
    goodsdetails(id) {
      this.$router.push(`/orderdetails?id=${id}`);
    },
  },
};
</script>
<style scoped lang="scss">
/* 订单页的样式 */
::v-deep .van-tabs__line {
  width: 45px !important;
  background-color: #1baeae !important;
}
::v-deep .van-tabs {
  position: fixed !important;
  z-index: 10 !important;
}
::v-deep .van-list {
  margin-top: 60px;
}

.orderlist {
  background-color: rgba($color: rgb(199, 199, 199), $alpha: 0.1);
  padding: 10px;
  .oredr {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    .p {
      margin: 0px;
      margin-bottom: 15px;
      padding: 10px 15px 0px 20px;
      .van-row {
        .van-col {
          font-size: 12px;
        }
        .van-col:last-child {
          text-align: right;
        }
      }
    }
    .van-card {
      background-color: #fff;
    }
  }
}
</style>